<script setup>
import {computed, onMounted, ref, toRefs, watch} from "vue";
import API from "@/config/api";
import {request} from "@/utils/request"

const categoryList = ref([])

const props = defineProps({
  categoryId: {
    type: Number,
    default: 0
  }
})

const {categoryId} = toRefs(props)

// 获取分类数据
function getCategoryData() {
  request(API.FindCategoryListByDepth, {classifyId: categoryId.value}, "GET")
      .then((res) => {
        categoryList.value = res.data;
      })
      .catch((err) => {
        // uni.hideLoading()
        throw Error(err);
      });
}

const listTemp = computed(() => {
  var list = categoryList.value
  var arrTemp = []
  var index = -1
  var count = 10 // 每组多少条
  let len = list.length
  if(len>15){
    len = 15
  } else if (len > 10) {
    len = 10
  }
  for (var i = 0; i < len; i++) {
    if (i % count === 0) {
      arrTemp.push([])
      index++
    }
    arrTemp[index].push(list[i])
  }
  return arrTemp
})

const navToList = (tid) => {
  uni.navigateTo({
    url: `/zwx_category_page1/goodsModule/goodsList?category3Id=${tid}&classifyLevel=2`,
  });
};

watch(()=>categoryId.value,(val)=>{
  console.log(val,'val')
  getCategoryData()
}, {
  immediate: true
})

defineExpose({
  getCategoryData
})
</script>

<template>
  <view class="category-box">
    <div class="list" v-for="(item,index) in listTemp" :key="index">
      <div class="item" v-for="(item2,index2) in item" :key="index2" @click="navToList(item2.classifyId)">
        <div class="item-img">
          <image class="img" :src="item2.classifyImage" mode="aspectFill"></image>
        </div>
        <div class="item-name">{{item2.classifyName}}</div>
      </div>
    </div>
  </view>
</template>

<style scoped lang="scss">
 .category-box{
   background: linear-gradient(0deg, #FFF6E9, #FFFFFF);
   border-radius: 12rpx;
   margin: 0 30rpx 30rpx;
   padding: 30rpx 7.5rpx 13rpx;
   // #ifdef MP-WEIXIN
   margin-top: 56rpx;
   // #endif
   // #ifdef H5
   margin-top: 84rpx;
   // #endif
   .list{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     .item{
       text-align: center;
       flex: 0 0 125rpx;
       padding:0 5rpx;
       margin-bottom: 27rpx;
       .item-img{
         .img {
           width: 125rpx;
           height: 125rpx;
         }
         margin-bottom: 6rpx;
       }
       .item-name{
         font-weight: 500;
         font-size: 24rpx;
         color: #3B3B3B;
         line-height: 1em;
       }
     }
   }
 }
</style>